<template>
  <div class="footer">
    <ul>
      <li v-for="(item, index) in message" :key="index" @click="change(index)">
        <router-link
          :to="item.topath"
          :class="{ active: isActive[index] }"
          exact
        >
          <span v-show="item.isActive" :class="item.icon2"></span>
          <span v-show="!item.isActive" :class="item.icon1"></span>
          <br />
          <span>{{ item.title }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: [
        {
          topath: "/",
          icon1: "iconfont icon-shouye",
          icon2: "iconfont icon-icon_home",
          title: "首页",
        },
        {
          topath: "/Category",
          icon1: "iconfont icon-leimupinleifenleileibie",
          icon2: "iconfont icon-class",
          title: "分类",
        },
        {
          topath: "/Car",
          icon1: "iconfont icon-gouwuche",
          icon2: "iconfont icon-gouwuche2",
          title: "购物车",
        },
        {
          topath: "/My",
          icon1: "iconfont icon-home",
          icon2: "iconfont icon-wode-r-selected",
          title: "我的",
        },
      ],
      isActive: [],
    };
  },
  created() {
    this.isActived();
  },
  methods: {
    change(index) {
        this.isActive = JSON.parse(localStorage.getItem("isActive"));
        for(let i=0;i<this.isActive.length;i++){
            this.isActive[i]=false
        }
        this.isActive[index]=true
        //把数据重新存储到本地存储中
        localStorage.setItem("isActive", JSON.stringify(this.isActive));
    },
    //底部图标状态改变
    isActived() {
      //获取状态数组
      this.isActive = JSON.parse(localStorage.getItem("isActive")) || [];
      this.isActive = this.isActive ? this.isActive : [true, false, false, false];
      //把数据重新存储到本地存储中
      localStorage.setItem("isActive", JSON.stringify(this.isActive));
    },
  },
};
</script>

<style>
.footer ul li {
  list-style-type: none;
  float: left;
  width: 25%;
  text-align: center;
  margin-top: 5px;
  font-size: 16px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid rgb(172, 168, 168);
  background-color: white;
}
a {
  text-decoration: none;
  color: black;
}
.active {
  color: rgb(235, 133, 133);
}
</style>